<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				display: flex;
				justify-content: center;
				align-items: center;
				min-height: 100vh;
				background-color: #040D15;
				flex-direction: column;
			}
			a{
				position: relative;
				display: inline-block;
				padding: 10px 25px;
				margin-top: 10px;
				text-decoration: none;
				text-transform: uppercase;
				letter-spacing: 2px;
				overflow: hidden;
				font-size: 16px;
				color: #fff;
				border-radius: 40px;
				background: linear-gradient(90deg,#016278,#55e7fc);
			}
			a:nth-child(2){
				background: linear-gradient(90deg,#755bea,#ff72c0);
			}
			span{
				position: absolute;
				background-color: #fff;
				pointer-events: none;
				transform: translate(-50%,-50%);
				border-radius: 50px;
				animation: anima 1s linear infinite;
			}
			@keyframes anima{
				from{width: 0;height: 0;opacity: 0.5;}
				to{width: 400px;height: 400px;opacity: 0;}
			}
			
		</style>
	</head>
	<body>
		<a href="#">button1</a>
		<a href="#">button2</a>
		<script type="text/javascript">
			const buttons = document.querySelectorAll("a")
			buttons.forEach(btn=>{
				btn.addEventListener('click',function(e){
					let x = e.clientX - e.target.offsetLeft
					let y = e.clientY - e.target.offsetTop;
					
					let ele = document.createElement("span")
					ele.style.left = x + 'px'
					ele.style.top = y + 'px'
					
					this.appendChild(ele)
					
					setTimeout(()=>{
						ele.remove()
					},1000)
				})
			})
		</script>
	</body>
</html>
